<template>
    <div class="merchant" ref='wrapper'>
      <div>
        <div class="merchant-info">
          <div class="merchant-info-top">
            <div class="merchant-info-top-left">
                <p class="merchant-name">{{seller.name}}</p>
                <div class="star-sellCount-wrapper">
                    <div class="stars">
                        <span
                        class="star-item"
                        v-for="(item,index) in CStars"
                        :key="index"
                        :class="item"
                        ></span>
                    </div>
                    <p class="text">(662)</p>
                    <p class="text-count">月售930单</p>
                </div>
            </div>
            <div class="merchant-info-top-right">
                <div class="collect-wrapper" @click="handleCollection">
                    <span :class="iconFavorite">

                    </span>
                    <p class="collect">{{favorite}}</p>
                </div>
            </div>
          </div>
          <div class="merchant-info-bottom">
            <div class="send-price-wrapper">
              <span class="send-price-title">起送价</span>
              <div class="price-wrapper">
                <span class="price">{{seller.minPrice}}</span>元
              </div>
            </div>
            <div class="Merchant-shipping-wrapper">
              <span class="Merchant-shipping-title">商家配送</span>
              <div class="shipping-wrapper">
                <span class="price">{{ seller.deliveryPrice }}</span>元
              </div>
            </div>
            <div class="delivery-time-wrapper">
              <span class="delivery-time-title">平均配送时间</span>
              <div class="time-wrapper">
                <span class="time">{{ seller.deliveryTime }}</span>分钟
              </div>
            </div>
          </div>
        </div>
        <div class="color-wall"></div>
        <!-- 公告活动 -->
        <div class="announcement-wrapper">
          <span class="title">公告与活动</span>
          <p class="announcement">
            {{seller.bulletin}}
          </p>
          <div
          class="activity-item"
          v-for="(item,index) in seller.supports"
          :key="index"
          >
            <span class="icon-type" :class="{type1:item.type==0,type2:item.type==1,type4:item.type==2,type5:item.type==3,type3:item.type==4}"></span>
            <p class="activity">{{item.description}}</p>
          </div>
        </div>
        <div class="color-wall"></div>
        <div class="live-action-wrapper">
          <span class="title">商家实景</span>
          <div ref="img-wrapper">
            <ul class="img-wrapper" ref="ul">
              <li class="img-item" v-for="(pick,i) in seller.pics" :key="i">
                <img class="img" :src="pick" alt="">
              </li>
            </ul>
          </div>
        </div>
        <div class="color-wall"></div>
        <div class="merchant-msg-wrapper">
          <p class="title">商家信息</p>
          <ul class="merchant-msg">
            <li class="msg-item" v-for="(msg,p) in seller.infos" :key="p">
              {{msg}}
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll'
export default {
  name: 'Mechant',
  data () {
    return {
      seller: '',
      goods: '',
      favorite: '未搜藏',
      iconFavorite: 'icon-favorite',
      isChoose: false
    }
  },
  computed: {
    CStars () {
      const res = []
      const score = Math.floor(this.seller.score * 2) / 2
      const intger = Math.floor(score)
      const hasdecimals = score % 1 !== 0
      for (let i = 0; i < intger; i++) {
        res.push('star-on')
      }
      if (hasdecimals) {
        res.push('star-half')
      }
      while (res.length < 5) {
        res.push('star-off')
      }
      return res
    }
  },
  methods: {
    getMerchantInfo () {
      axios.get('/api/seller').then(result => {
        if (result.data.erron === 0) {
          this.seller = result.data.data
          // 改写ul的宽度
          this.$refs.ul.style.width = (this.seller.pics.length) * 2.4 + 0.12 * (this.seller.pics.length - 1) + 0.36 + 'rem'
        }
      })
      axios.get('/api/goods').then(result => {
        if (result.data.erron === 0) {
          this.goods = result.data.data
        }
      })
    },
    initializeScroll () {
      this.$nextTick(() => {
        if (!this.imgScroll) {
          this.imgScroll = new BScroll(this.$refs['img-wrapper'], {
            click: true,
            scrollX: true,
            scrollY: true
          })
        }
      })
    },
    handleCollection () {
      if (this.isChoose) {
        this.favorite = '未搜藏'
        this.iconFavorite = 'icon-favorite'
        this.isChoose = false
      } else {
        this.favorite = '已搜藏'
        this.iconFavorite = this.iconFavorite + ' choose'
        this.isChoose = true
      }
    }
  },
  mounted () {
    this.getMerchantInfo()
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true
    })
    this.$nextTick(() => {
      this.initializeScroll()
    })
  }
}
</script>

<style lang="stylus" scoped>
.merchant{
  height 100%
  width 100%
  overflow hidden
  .merchant-info{
    padding .36rem
    .merchant-info-top{
      display flex
      border-bottom 1px solid rgba(7,17,27,.1)
      padding-bottom .36rem
      .merchant-info-top-left{
        .merchant-name{
          font-size .28rem
          color rgb(7,17,27)
        }
        .star-sellCount-wrapper{
          margin-top .16rem
          display flex
          align-items center
          color rgb(77,85,93)
          font-size .2rem
          .stars{
            width 2.5rem
            display flex
            justify-content space-between
            .star-item{
              display inline-block
              width 0.36rem
              height 0.36rem
              background-size cover
              background-repeat no-repeat
            }
            .star-on{
              background-image url('../../../assets/imgs/star36_on@2x.png')
            }
            .star-off{
              background-image url('../../../assets/imgs/star36_off@2x.png')
            }
            .star-half{
              background-image url('../../../assets/imgs/star36_half@2x.png')
            }
          }
          .text{
            margin-left .16rem
          }
          .text-count{
            margin-left .24rem
          }
        }
      }
      .merchant-info-top-right{
        flex 1
        .collect-wrapper{
          float right
          text-align center
          .icon-favorite{
            font-size .48rem
          }
          .choose{
            color rgb(240,20,20)
          }
          .collect{
            font-size .2rem
            margin-top .08rem
            color rgb(77,85,93)
          }
        .icon-favorite:before{
            content '\e904'
          }
        }
      }
    }
    .merchant-info-bottom{
      padding-top .36rem
      display flex
      .send-price-wrapper{
        flex 1
        text-align center
        .send-price-title{
          font-size .2rem
          color rgb(147,153,159)
          line-height .2rem
        }
        .price-wrapper{
          margin-top .08rem
          font-size .2rem
          color rgb(7,17,27)
          font-weight 200
          .price{
            font-size .48rem
          }
        }
      }
      .Merchant-shipping-wrapper{
        text-align center
        flex 1
        border-left 1px solid rgba(7,17,27,.1)
        border-right 1px solid rgba(7,17,27,.1)
        .Merchant-shipping-title{
          font-size .2rem
          color rgb(147,153,159)
          line-height .2rem
        }
        .shipping-wrapper{
          margin-top .08rem
          font-size .2rem
          color rgb(7,17,27)
          font-weight 200
          .price{
            font-size .48rem
          }
        }
      }
      .delivery-time-wrapper{
        text-align center
        flex 1
        .delivery-time-title{
          font-size .2rem
          color rgb(147,153,159)
          line-height .2rem
          margin-bottom .08rem
        }
        .time-wrapper{
          margin-top .08rem
          font-size .2rem
          color rgb(7,17,27)
          font-weight 200
          .time{
            font-size .48rem
          }
        }
      }
    }
  }
  .color-wall{
    width 100%
    height .32rem
    background-color #f3f5f7
    border-top: 1px solid rgba(7,17,27,.1)
    border-bottom: 1px solid rgba(7,17,27,.1)
  }
  .announcement-wrapper{
    padding .36rem .36rem 0 .36rem
    .title{
      font-size .28rem
      color rbg(7,17,27)
    }
    .announcement{
      font-weight 200
      font-size .24rem
      color rgb(240,20,20)
      line-height .48rem
      padding .16rem .24rem .36rem .24rem
    }
    .activity-item{
      padding .32rem .24rem .32rem .24rem
      border-top 1px solid rgba(7,17,27,.1)
      .icon-type{
        display inline-block
        width .32rem
        height .32rem
        vertical-align middle
        background-repeat no-repeat
        background-size cover
      }
      .type1{
        background-image url('../../../assets/imgs/decrease_3@2x.png')
      }
      .type2{
        background-image url('../../../assets/imgs/discount_3@2x.png')
      }
      .type3{
        background-image url('../../../assets/imgs/guarantee_3@2x.png')
      }
      .type4{
        background-image url('../../../assets/imgs/special_3@2x.png')
      }
      .type5{
        background-image url('../../../assets/imgs/invoice_3@2x.png')
      }
      .activity{
        display inline
        font-size .24rem
        font-weight 200
        color rgb(7,17,27)
        vertical-align middle
      }
    }
  }
  .live-action-wrapper{
    padding .36rem 0 .36rem .36rem
    .title{
      font-size .28rem
      color rbg(7,17,27)
    }
    .img-wrapper{
      padding .24rem 0 .36rem 0
      overflow hidden
      .img-item{
        width 2.4rem
        height 1.8rem
        overflow hidden
        float left
        margin-right .12rem
        .img{
          width 100%
        }
      }
    }
  }
  .merchant-msg-wrapper{
    padding .36rem .36rem 0 .36rem
    .title{
      font-size .28rem
      color rbg(7,17,27)
      border-bottom 1px solid rgba(7,17,27,.1)
      line-height .72rem
    }
    .merchant-msg{
      display flex
      flex-direction column
      .msg-item{
        flex 1
        padding .32rem .24rem .32rem .24rem
        border-bottom 1px solid rgba(7,17,27,.1)
        font-size .24rem
        font-weight 200
        color rgb(7,17,27)
      }
    }
  }
}
</style>
